今天要完成兩件事，

首先就是滑鼠的滾輪可以控制地球的大小縮放

第二就是滑鼠的拖曳可以旋轉地球

參考了這個網站

http://www.sitepoint.com/html5-javascript-mouse-wheel/

之後整件事就變得非常簡單。

首先，我們要加入一個控制距離的變數

var distance=3;

function setupWebGL()
{
	...
	mat4.translate(mvMatrix, [0.0, 0.0, -distance]);    
        ...
}

由於我們設定是地球的中心就是OpenGL，而攝影機固定不動，

所以distance的值越大，畫面就離地球越遠，地球就越小

然後加入以下函式

function initWheelEvent(canvas)
{
	if (canvas.addEventListener) {
		// IE9, Chrome, Safari, Opera
		canvas.addEventListener("mousewheel", MouseWheelHandler, false);
		// Firefox
		canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
	}
	// IE 6/7/8
	else canvas.attachEvent("onmousewheel", MouseWheelHandler);

}


function MouseWheelHandler(e) {

	// cross-browser wheel delta
	var e = window.event || e; // old IE support
	var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));


	distance+=delta*0.1;
	
	
	return false;
}

initWheelEvent接受canvas當作參數，處理跨平台的mouse wheel事件

MouseWheelHandler則是事件處理者，得到滾輪位移的量值之後直接加上distance，

然後再init函式中加入initWheelEvent就可以用滾輪控制地球大小了！

接下來是滑鼠拖曳的功能，我們希望按住左鍵左右拖曳，可以讓地球以y軸選轉，上下可以讓地球繞x軸旋轉

所以我們創了兩個變數

var angle=0;
var phi=0;

function setupWebGL()
{
  	mat4.rotate(mvMatrix, angle, [0.0, 1.0, 0.0]);         
	mat4.rotate(mvMatrix, phi, [1.0, 0.0, 0.0]);       
}

接著參考這個網站：http://javascript.info/tutorial/mouse-events#simple-events

寫出拖曳的函式

function initMouseDragEvent(canvas)
{
	
	canvas.onmousedown=function(e){
		
		e = e || event;

		oldPosX = e.clientX;
		oldPoxY = e.clientY;
		
		document.onmousemove = function(e) {
			
			e = e || event;
			
			var deltax = e.clientX-oldPosX;
			var deltay = e.clientY-oldPoxY;
			
			oldPosX = e.clientX;
			oldPoxY =  e.clientY;
			angle += 0.005*deltax;
			phi += 0.005*deltay;
		}
			
		this.onmouseup = function() {
			document.onmousemove = null;
		}
	}
	
}

上面這個函式的意思是，若是當滑鼠點擊canvas區域時，整個視窗的mousemove事件就是要改變我們那兩個角度變數

一放開mousemove事件就取消。

然後一點擊canvas就記錄滑鼠點擊位置，然後依次觸發mousemove事件就可以算出x與y方向的移動量，

以此來旋轉地球！

在init函式中加入initMouseDragEvent，就可以與使用者基本的互動了